@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
button {
  cursor: pointer;
  background-color: transparent;
}
.salary-container {
  --primary-color: #5cb3cc;
  --success-color: #57c3c2;
  --warning-color: #ddc871;
  --error-color: #c45a65;
  --loading-color: #c06f98;
  --dark-font-color: #ddd;
  height: 100vh;
  width: 100%;
  display: flex;
  background-color: #2b333e;
  flex-direction: column;
  overflow: hidden;
}
.backhome {
  display: none;
}
.salary-title {
  width: 100%;
  font-family: "Lobster", Helvetica, sans-serif;
  font-size: 50px;
  margin-left: 25px;
  background-color: #eee;
  height: 100px;
  line-height: 100px;
  background: linear-gradient(35deg, yellow, red);
  background-clip: text;
  color: transparent;
}
.select-file-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.select-file {
  margin-top: 10px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 20px;
  border: 1px solid #4ca3bb;
  border-radius: 5px;
}
.select-file:hover {
  box-shadow: 0 0 10px #5cb3cc;
}
.select-file div {
  width: 100%;
  display: flex;
}
.select-file div.input-div {
  justify-content: center;
}
.select-file div.input-div label {
  width: 80px;
  padding: 8px 25px;
  border: 1px solid #5cb3cc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5cb3cc;
  font-weight: bold;
  cursor: pointer;
}
.select-file div.input-div label.disable {
  cursor: no-drop;
  text-decoration: line-through;
  pointer-events: none;
}
.select-file div.input-div label:hover {
  background-color: #5cb3cc;
  color: white;
}
.select-file div.input-div label:active {
  background-color: #4ca3bb;
}
.select-file div.input-div input {
  display: none;
}
button.delete-file {
  border: 0;
  background-color: transparent;
  outline: none;
}
button.delete-file svg path.line {
  fill: var(--dark-font-color);
}
button.delete-file:hover > svg path.line {
  fill: #f56c6c;
}
button.delete-file {
  margin-left: auto;
}
.select-file div.preview-div {
  margin-top: 10px;
  align-items: center;
}
.select-file div.preview-div > font {
  color: var(--dark-font-color);
}
.select-file div.preview-div:hover > font {
  color: #67c23a;
}
.select-file div font {
  text-indent: 10px;
}
div.submit-div {
  padding: 10px 0;
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: indigo; */
}
button.submit {
  width: 160px;
  padding: 8px 20px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  color: #5cb3cc;
  font-weight: bold;
  font-size: 16px;
  outline: none;
}
button.submit:hover {
  background-color: var(--primary-color);
  color: white;
}
button.submit:active {
  background-color: #4ca3bb;
}
.message-wrapper {
  width: 100%;
  height: 60px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.message-main {
  min-width: 400px;
  height: 50px;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: var(--primary-color);
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
}
.message-main.success {
  background-color: var(--success-color);
}
.message-main.warning {
  background-color: var(--warning-color);
}
.message-main.error {
  background-color: var(--error-color);
}

.progress-wrapper {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
  border: 6px solid rgb(184, 187, 191);
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: rgb(172, 28, 177);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.progress-main::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -36px;
  margin-top: -36px;
  display: block;
  border: 6px solid transparent;
  border-top-color: rgb(172, 28, 191);
  border-radius: 100%;
  width: 60px;
  height: 60px;
  animation: loading_rotate infinite 2s ease;
}
@keyframes loading_rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
